<template>
  <view class="main">
    <view class="top_title">
      <text>税目</text>
      <text>税率</text>
    </view>
    <view class="list menu">
      <view class="item_detail" v-for="(item, index) in detailData" :key="index">
        <text class="name">
          {{ item.name }}
        </text>
        <text class="tax">
          {{ item.tax }}
        </text>
      </view>
    </view>
  </view>
</template>

<script type="text/javascript" src="plus-confusion://../tools/shuilv/details"></script>

<style scoped lang="scss">
.main {
  height: 100%;
  overflow-y: auto;
  background-color: #fff;

  .top_title {
    height: 100rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #CFF3C6;
    color: #999;
  }

  .list {
    padding: 0 30rpx;

    .item_detail {
      position: relative;
      padding: 15rpx 0;
      min-height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #eee;

      .name {
        line-height: 40rpx;
        width: 300rpx;
      }

      .tax {
        display: flex;
        justify-content: flex-end;
        width: 200rpx;
      }
    }
  }
}
</style>